<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.4.5 (461378)"/><meta name="author" content="704206198@qq.com"/><meta name="created" content="2020-08-17 16:11:57 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-10-18 15:13:57 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>day01：开发流程规范与 Vue  - 指令</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><div style="line-height: 160%; box-sizing: content-box;"><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">一、认识VUE
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">二、MV* 模式
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">三、VUE基础
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1. 使用
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1.1. 引入
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1.2. 初始化VUE
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1.3. options解析
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1.4. el选项
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">1.5. data选项 + 模板语法-插值
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2. 模板语法-指令
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2.1. vue提供的固有指令
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">2.2. 自定义指令
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">3. 插值语法
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4. 双向绑定
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4. 条件渲染
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4.1 基本条件渲染
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">4.2 使用key值管理可复用元素
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">5. 列表渲染
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">5.1 v-for + key 属性的使用
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">5.2 key的唯一性
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">5.3 循环的嵌套
</a></li></ul></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">6. class与style的绑定
</a><ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;"><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">6.1 class 的绑定
</a></li><li style="line-height: 160%; box-sizing: content-box; position: relative;"><a style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">6.2 style 的绑定 (作业)
</a></li></ul></li></ul></li></ul></div><h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000; margin-top: 14px;">一、认识VUE</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">什么是VUE</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><a href="https://cn.vuejs.org/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">VUE官网</a></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">vue开发者工具</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><a href="https://github.com/vuejs/vue-devtools" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">Vue Devtools</a></li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://cn.vuejs.org/v2/guide/installation.html" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">下载版本介绍</a></p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">下载源码</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">cdn下载</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">包管理器下载</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">体验VUE的强大</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">购物车案例的快速实现</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;">    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
                <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-for</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"(item,idx) in goods"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:key</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item.goodsId"</span>&gt;</span>
                    {{item.goodsId}} -
                    {{item.goodsName}} -
                    {{item.stock}}
                    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"add(idx)"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item.stock-item.sales != 0"</span>&gt;</span>+<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
                    {{item.sales}}
                    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span> @<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"dec(idx)"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item.sales != 0"</span>&gt;</span>-<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">button</span>&gt;</span>
                    - {{item.stock - item.sales}}
                    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item.stock - item.sales &lt;= 0"</span>&gt;</span>卖完了<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
                <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>总销售量：{{sum}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">p</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
        <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>:{
                <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goods</span>:[{
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsName</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"手机"</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">stock</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">90</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">sales</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">8</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsId</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>
                },{
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsName</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"电脑"</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">stock</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">20</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">sales</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">5</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsId</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>
                },{
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsName</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"冰箱"</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">stock</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">30</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">sales</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">26</span>,
                    <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">goodsId</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">2</span>
                }]
            },
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
                add(i){
                    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.goods[i].sales++;
                },
                dec(i){
                    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.goods[i].sales--;
                }
            },
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">computed</span>: {
                sum(){
                    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.goods.reduce(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">(<span style="color: #dcdcdc; line-height: 160%; box-sizing: content-box;">prev,now</span>)=&gt;</span>{
                        <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">return</span> prev + now.sales;
                    },<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>);
                }
            },
        })
    </span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://cn.vuejs.org/v2/guide/" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">读文档</a></p>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">二、MV* 模式</h1>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal;">
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">MVC模式</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">M（Model）模型，V（View）视图，C（controller）控制器</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">是使用一种将业务，数据，视图分离的方式组织架构代码</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">组件是架构开发，常常将视图，数据，业务逻辑等写在一个模块内，如果组件内容很多，常常造成层次的混乱，增加开发和日后维护的成本</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">MVC模式就是专门处理这种问题的。</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">MVP模式</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">传统的MVC模式虽然可以管理页面系统中的数据，视图，控制器，但是在视图层创建界面时常常会用到模型层内的数据，使模型层和视图层耦合在一起，降低了复用性和灵活性</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">MVP模式就是为了解决这方面的问题。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">M（Model）模型，V（View）视图，P（Presenter）管理器</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">视图层不再直接引入模型层中的数据，而是通过管理层实现对模型层内的数据的访问。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">即所有层次的交互都发生在管理层中，从而降低了模型层和视图层之间的耦合关系，提升了灵活性和复用性</li>
</ul>
</li>
<li style="line-height: 160%; box-sizing: content-box;">
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">MVVM模式</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">在MVP模式中，所有的操作都在管理层中，因此必须创建管理器才能实现需求，但是对于开发者来说，如果js学习的不深入，操作管理器的成本其实很大。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">MVVM模式的出现就是为了进一步的减少这种操作成本，使开发者只需要通过操作html就能创建视图实现页面需求</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">M（Model）模型，V（View）视图，VM（ViewModel）视图模型层。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">为视图层量身定做一套视图模型，并在视图模型中创建属性和方法，为视图层绑定数据并实现交互</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">MVVM模式是从MVC模式和MVP模式演化而来，因此它主要也是分离视图和模型。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不同的是MVVM模式使视图层更加灵活，可以独立于数据层和视图层，实现独立修改，自由创建。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">MVVM模式是对视图模型层的高度抽象，因此当多个视图层对应一个视图模型层时，也使得视图模型层内的代码逻辑变得高度复用。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">这样可以极大的方便不懂js的人，只要了解简单的html内容并按照视图层的规范格式创建视图即可，开发人员就可以专注于开发视图模型层内的业务逻辑。</li>
</ul>
</li>
</ol>
<h1 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 41px; border-bottom: 3px double #999; color: #000;">三、VUE基础</h1>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">1. 使用</h3>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">1.1. 引入</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">&lt;script src="vue.js"&gt;&lt;/script&gt;</code></li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">1.2. 初始化VUE</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">const vm = new Vue(options);</code></li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">1.3. options解析</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">- Vue的配置信息，对象数据，键名由Vue指定，值由Vue约束<br/>
- 内含多个选项，如：el，data，methods，computed等...</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">1.4. el选项</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">用于标记需要使用vue渲染的容器</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 需要使用vue渲染的容器</span>
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">1.5. data选项 + 模板语法-插值</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">用于设置vue实例中需要使用的数据</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-bind:title</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"tit"</span>&gt;</span>{{msg}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{  <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">// 当前vue实例中需要使用的数据，以键值对的形式存在</span>
            msg:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>,
            tit:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"鼠标悬停效果"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><img src="day01%EF%BC%9A%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E8%A7%84%E8%8C%83%E4%B8%8E%20Vue%20%20-%20%E6%8C%87%E4%BB%A4.resources/C8C94246-E913-454F-B3DB-218E344963F2.png" height="416" width="756"/></p>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">2. 模板语法-指令</h3>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">2.1. vue提供的固有指令</h5>
<table style="margin: 2px 0 14px; color: #333; width: auto; border-collapse: collapse; box-sizing: border-box;"><thead style="line-height: 160%; box-sizing: content-box;"><tr style="line-height: 160%; box-sizing: content-box;"><th align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #72777b; border-top: 0; background-color: #7b8184; font-weight: 300; color: #fff; padding-top: 6px;">指令</th><th align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #72777b; border-top: 0; background-color: #7b8184; font-weight: 300; color: #fff; padding-top: 6px;">功能</th></tr></thead><tbody style="line-height: 160%; box-sizing: content-box;"><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-text</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">模板语法-插值-不解析html</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-html</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">模板语法-插值-解析html</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-show</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">条件判断</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-if</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">条件判断</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-else</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">条件判断</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-else-if</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">条件判断</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-for</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">列表循环</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-on</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">绑定事件</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-bind</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">绑定属性</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-model</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">双向绑定</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-slot</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">插槽</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-pre</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">跳过这个元素和他的子元素的编译过程</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-cloak</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">这个指令保持在元素上直到关联实例结束编译</td></tr><tr style="line-height: 160%; box-sizing: content-box;"><td align="right" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">v-once</td><td align="left" style="line-height: 160%; box-sizing: content-box;  padding: 5px 14px 5px 12px; border: 1px solid #eaeaea;">只渲染元素和组件一次</td></tr></tbody></table>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">2.2. <a href="https://cn.vuejs.org/v2/guide/custom-directive.html" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">自定义指令</a></h5>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">3. 插值语法</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">{{}}</code>, <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-text</code>, <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-html</code></li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>{{msg1}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>{{msg2}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-text</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg1"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-text</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg2"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-html</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg1"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-html</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"msg2"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            msg1:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"hello vue"</span>,
            msg2:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"&lt;mark&gt;hello vue&lt;/mark&gt;"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><img src="day01%EF%BC%9A%E5%BC%80%E5%8F%91%E6%B5%81%E7%A8%8B%E8%A7%84%E8%8C%83%E4%B8%8E%20Vue%20%20-%20%E6%8C%87%E4%BB%A4.resources/65DA2C59-3579-4C4F-8D2E-F3750D904D4F.png" height="420" width="742"/></p>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">4. 双向绑定</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-model</code></li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 输入框绑定value --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"text"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">placeholder</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"用户名"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"username"</span> /&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data-tomark-pass</span>&gt;</span>        
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"password"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">placeholder</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"密码"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"password"</span> /&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data-tomark-pass</span>&gt;</span>        
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 单选框绑定选中的value --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"radio"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sex"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sex"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"1"</span> /&gt;</span>男<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data-tomark-pass</span>&gt;</span>        
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"radio"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sex"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"sex"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"0"</span> /&gt;</span>女<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data-tomark-pass</span>&gt;</span>        
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 下拉列表绑定选中的项 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">select</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"city"</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"北京"</span>&gt;</span>北京<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"上海"</span>&gt;</span>上海<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"广州"</span>&gt;</span>广州<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">select</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 复选框（多个）绑定选中的项 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkbox"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"篮球"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span>&gt;</span>篮球
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkbox"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"足球"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span>&gt;</span>足球
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkbox"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">name</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"排球"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"like"</span>&gt;</span>排球
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 文本域绑定内容 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">textarea</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"note"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">textarea</span>&gt;</span>
        <span style="color: #57a64a; font-style: italic; line-height: 160%; box-sizing: content-box;">&lt;!-- 复选框（单个）绑定是否选中的布尔值 --&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkbox"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"flag"</span>&gt;</span>同意条款
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"button"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"查看用户输入信息"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"getData"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">el</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data</span>:{
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">username</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">password</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">sex</span>:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">city</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">like</span>:[],
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">note</span>:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">""</span>,
            <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">flag</span>:<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>
        },
        <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">methods</span>: {
            getData(){
                <span style="color: #4ec9b0; line-height: 160%; box-sizing: content-box;">console</span>.log(<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.$data);
            }
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">4. 条件渲染</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-show</code>, <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-if</code>, <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-else</code>, <code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-else-if</code></li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">4.1 基本条件渲染</h5>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">select</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state"</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"0"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">selected</span>&gt;</span>0<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"1"</span>&gt;</span>1<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"2"</span>&gt;</span>2<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">option</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">select</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state==0"</span>&gt;</span>吃饭<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-else-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state==1"</span>&gt;</span>睡觉<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-else</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state"</span>&gt;</span>学习<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">hr</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-show</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state==0"</span>&gt;</span>吃饭<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-show</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state==1"</span>&gt;</span>睡觉<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-show</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"state==2"</span>&gt;</span>学习<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">h1</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            state:<span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">0</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">if 和 show的区别.gif</p>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">v-if 是“真正”的条件渲染</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">v-show 不管初始条件是什么，都会渲染，只是基于 CSS 的 display 进行切换</li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">4.2 使用key值管理可复用元素</h5>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-if</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"loginType === 'username'"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:key</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"0"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">placeholder</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"用户名"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-else</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:key</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"1"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">placeholder</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"密码"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">br</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">data-tomark-pass</span>&gt;</span>        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"button"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-on:click</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"setData"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-bind:value</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"loginType"</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            loginType:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"username"</span>
        },
        methods: {
            setData(){
                <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.loginType = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">this</span>.loginType==<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"username"</span> ? <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"password"</span> : <span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"username"</span>;
            }
        },
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;"><a href="https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0" style="line-height: 160%; box-sizing: content-box; text-decoration: underline; color: #5286bc;">参考文档</a></p>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">5. 列表渲染</h3>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><code style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; color: #c1788b; padding: 4px 4px 2px 0; letter-spacing: -.3px;">v-for</code></li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">5.1 v-for + key 属性的使用</h5>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-for</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item in list"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:key</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item"</span>&gt;</span>{{item}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            list:[<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"花生"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"瓜子"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"火腿肠"</span>]
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">5.2 key的唯一性</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">同一个父元素的子元素必须有不同的 key。重复的 key 会造成渲染错误。</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果数据自身具有唯一性，可以将数据设置为key值</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">如果没有唯一的数据，可以将数据的索引设置为key值，但不推荐</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">尽量让数据拥有唯一的值</li>
</ul>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">5.3 循环的嵌套</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">循环支持嵌套使用</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-for</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"val in list"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">:key</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"s"</span>&gt;</span>
                <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>{{val.title}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">span</span>&gt;</span>
                <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
                    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-for</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"item in val.items"</span>&gt;</span>{{item}}<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
                <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
            <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">li</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">ul</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            list:[{
                title:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"大菜"</span>,
                items:[<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"红烧肉"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"糖醋排骨"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"麻辣鱼头"</span>]
            },{
                title:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"小菜"</span>,
                items:[<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"酸辣土豆丝"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"干煸豆角"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"地三鲜"</span>]
            },{
                title:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"凉菜"</span>,
                items:[<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"花生米"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"拌黄瓜"</span>,<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"皮蛋豆腐"</span>]
            },]
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;"><strong style="line-height: 160%; box-sizing: content-box; font-weight: 700;">注意：</strong>
<ol style="line-height: 160%; box-sizing: content-box; display: block; padding-left: 30px; margin: 6px 0 10px; color: #333; list-style-type: decimal; margin-top: 0; margin-bottom: 0;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">不推荐同时使用 v-if 和 v-for</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">v-if 与 v-for 一起使用时， v-for 比 v-if 的优先级更高。</li>
</ol>
</li>
</ul>
<h3 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 27px; color: #333;">6. class与style的绑定</h3>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">6.1 class 的绑定</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">条件写法</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.box</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">width</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">height</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">border</span>: solid <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1px</span> black;}
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.red</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">background</span>: red;}
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">input</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">type</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"checkbox"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-model</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"flag"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-bind:class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"flag ? 'box red' : 'box'"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            flag:<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">false</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">对象写法</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.box</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">width</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">height</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">border</span>: solid <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1px</span> black;}
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.red</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">background</span>: red;}
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.green</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">background</span>: green;}
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-bind:class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"{box:flag,red:!flag,green:flag}"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            flag:<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">true</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">数组写法</li>
</ul>
<pre style="line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; margin: 2px 0 8px; background-color: #f5f7f8;"><code style="display: block; overflow-x: auto; background: #1e1e1e; line-height: 160%; box-sizing: content-box; border: 0; border-radius: 0; letter-spacing: -.3px; padding: 18px; color: #f4f4f4; white-space: pre-wrap;"><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.box</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">width</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">height</span>: <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">100px</span>;<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">border</span>: solid <span style="color: #b8d7a3; line-height: 160%; box-sizing: content-box;">1px</span> black;}
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.red</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">background</span>: red;}
    <span style="color: #d7ba7d; line-height: 160%; box-sizing: content-box;">.green</span>{<span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">background</span>: green;}
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">style</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">id</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"app"</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">style</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"border:solid 2px #aaa;padding: 20px;"</span>&gt;</span>
        <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">v-bind:class</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"[style,color]"</span>&gt;</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
    <span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">div</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">body</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span> <span style="color: #9cdcfe; line-height: 160%; box-sizing: content-box;">src</span>=<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"libs/vue.js"</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;"/><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
<span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span><span style="line-height: 160%; box-sizing: content-box;">
    <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">const</span> vm = <span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">new</span> Vue({
        el:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"#app"</span>,
        data:{
            style:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"box"</span>,
            color:<span style="color: #d69d85; line-height: 160%; box-sizing: content-box;">"red"</span>
        }
    })
</span><span style="color: #9b9b9b; line-height: 160%; box-sizing: content-box;">&lt;/<span style="color: #569cd6; line-height: 160%; box-sizing: content-box;">script</span>&gt;</span>
</code></pre>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">6.2 style 的绑定 (作业)</h5>
<ul style="line-height: 160%; box-sizing: content-box; display: block; list-style-type: disc; padding-left: 30px; margin: 6px 0 10px; color: #333;">
<li style="line-height: 160%; box-sizing: content-box; position: relative;">对象写法</li>
<li style="line-height: 160%; box-sizing: content-box; position: relative;">数组写法</li>
</ul>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%5Btoc%5D%0A%23%20%E4%B8%80%E3%80%81%E8%AE%A4%E8%AF%86VUE%0A1.%20%E4%BB%80%E4%B9%88%E6%98%AFVUE%0A%20%20%20%20-%20Vue%20(%E8%AF%BB%E9%9F%B3%20%2Fvju%CB%90%2F%EF%BC%8C%E7%B1%BB%E4%BC%BC%E4%BA%8E%20view)%20%E6%98%AF%E4%B8%80%E5%A5%97%E7%94%A8%E4%BA%8E%E6%9E%84%E5%BB%BA%E7%94%A8%E6%88%B7%E7%95%8C%E9%9D%A2%E7%9A%84%E6%B8%90%E8%BF%9B%E5%BC%8F%E6%A1%86%E6%9E%B6%E3%80%82%E4%B8%8E%E5%85%B6%E5%AE%83%E5%A4%A7%E5%9E%8B%E6%A1%86%E6%9E%B6%E4%B8%8D%E5%90%8C%E7%9A%84%E6%98%AF%EF%BC%8CVue%20%E8%A2%AB%E8%AE%BE%E8%AE%A1%E4%B8%BA%E5%8F%AF%E4%BB%A5%E8%87%AA%E5%BA%95%E5%90%91%E4%B8%8A%E9%80%90%E5%B1%82%E5%BA%94%E7%94%A8%E3%80%82Vue%20%E7%9A%84%E6%A0%B8%E5%BF%83%E5%BA%93%E5%8F%AA%E5%85%B3%E6%B3%A8%E8%A7%86%E5%9B%BE%E5%B1%82%EF%BC%8C%E4%B8%8D%E4%BB%85%E6%98%93%E4%BA%8E%E4%B8%8A%E6%89%8B%EF%BC%8C%E8%BF%98%E4%BE%BF%E4%BA%8E%E4%B8%8E%E7%AC%AC%E4%B8%89%E6%96%B9%E5%BA%93%E6%88%96%E6%97%A2%E6%9C%89%E9%A1%B9%E7%9B%AE%E6%95%B4%E5%90%88%E3%80%82%E5%8F%A6%E4%B8%80%E6%96%B9%E9%9D%A2%EF%BC%8C%E5%BD%93%E4%B8%8E%E7%8E%B0%E4%BB%A3%E5%8C%96%E7%9A%84%E5%B7%A5%E5%85%B7%E9%93%BE%E4%BB%A5%E5%8F%8A%E5%90%84%E7%A7%8D%E6%94%AF%E6%8C%81%E7%B1%BB%E5%BA%93%E7%BB%93%E5%90%88%E4%BD%BF%E7%94%A8%E6%97%B6%EF%BC%8CVue%20%E4%B9%9F%E5%AE%8C%E5%85%A8%E8%83%BD%E5%A4%9F%E4%B8%BA%E5%A4%8D%E6%9D%82%E7%9A%84%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8%E6%8F%90%E4%BE%9B%E9%A9%B1%E5%8A%A8%E3%80%82%0A%20%20%20%20-%20%5BVUE%E5%AE%98%E7%BD%91%5D(https%3A%2F%2Fcn.vuejs.org%2F)%0A%0A2.%20vue%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%0A%20%20%20%20-%20%5BVue%20Devtools%5D(https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue-devtools)%0A%0A3.%20%5B%E4%B8%8B%E8%BD%BD%E7%89%88%E6%9C%AC%E4%BB%8B%E7%BB%8D%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Finstallation.html)%0A%20%20%20%20-%20%E4%B8%8B%E8%BD%BD%E6%BA%90%E7%A0%81%0A%20%20%20%20-%20cdn%E4%B8%8B%E8%BD%BD%0A%20%20%20%20-%20%E5%8C%85%E7%AE%A1%E7%90%86%E5%99%A8%E4%B8%8B%E8%BD%BD%0A%0A4.%20%E4%BD%93%E9%AA%8CVUE%E7%9A%84%E5%BC%BA%E5%A4%A7%0A%20%20%20%20-%20%E8%B4%AD%E7%89%A9%E8%BD%A6%E6%A1%88%E4%BE%8B%E7%9A%84%E5%BF%AB%E9%80%9F%E5%AE%9E%E7%8E%B0%0A%20%20%20%20%60%60%60html%0A%20%20%20%20%20%20%20%20%3Cbody%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20v-for%3D%22(item%2Cidx)%20in%20goods%22%20%3Akey%3D%22item.goodsId%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bitem.goodsId%7D%7D%20-%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bitem.goodsName%7D%7D%20-%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bitem.stock%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20%40click%3D%22add(idx)%22%20v-if%3D%22item.stock-item.sales%20!%3D%200%22%3E%2B%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7Bitem.sales%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%20%40click%3D%22dec(idx)%22%20v-if%3D%22item.sales%20!%3D%200%22%3E-%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20-%20%7B%7Bitem.stock%20-%20item.sales%7D%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%20v-if%3D%22item.stock%20-%20item.sales%20%3C%3D%200%22%3E%E5%8D%96%E5%AE%8C%E4%BA%86%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cp%3E%E6%80%BB%E9%94%80%E5%94%AE%E9%87%8F%EF%BC%9A%7B%7Bsum%7D%7D%3C%2Fp%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%20%20%20%20%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%20%20%20%20%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goods%3A%5B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsName%3A%22%E6%89%8B%E6%9C%BA%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stock%3A90%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sales%3A8%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsId%3A0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsName%3A%22%E7%94%B5%E8%84%91%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stock%3A20%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sales%3A5%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsId%3A1%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsName%3A%22%E5%86%B0%E7%AE%B1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20stock%3A30%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sales%3A26%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20goodsId%3A2%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20add(i)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.goods%5Bi%5D.sales%2B%2B%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dec(i)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.goods%5Bi%5D.sales--%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20computed%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20sum()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20this.goods.reduce((prev%2Cnow)%3D%3E%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20prev%20%2B%20now.sales%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C0)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E%0A%20%20%20%20%60%60%60%0A%0A5.%20%5B%E8%AF%BB%E6%96%87%E6%A1%A3%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2F)%0A%0A%23%20%E4%BA%8C%E3%80%81MV*%20%E6%A8%A1%E5%BC%8F%0A1.%20MVC%E6%A8%A1%E5%BC%8F%0A%20%20%20%20-%20M%EF%BC%88Model%EF%BC%89%E6%A8%A1%E5%9E%8B%EF%BC%8CV%EF%BC%88View%EF%BC%89%E8%A7%86%E5%9B%BE%EF%BC%8CC%EF%BC%88controller%EF%BC%89%E6%8E%A7%E5%88%B6%E5%99%A8%0A%20%20%20%20-%20%E6%98%AF%E4%BD%BF%E7%94%A8%E4%B8%80%E7%A7%8D%E5%B0%86%E4%B8%9A%E5%8A%A1%EF%BC%8C%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%A7%86%E5%9B%BE%E5%88%86%E7%A6%BB%E7%9A%84%E6%96%B9%E5%BC%8F%E7%BB%84%E7%BB%87%E6%9E%B6%E6%9E%84%E4%BB%A3%E7%A0%81%0A%20%20%20%20-%20%E7%BB%84%E4%BB%B6%E6%98%AF%E6%9E%B6%E6%9E%84%E5%BC%80%E5%8F%91%EF%BC%8C%E5%B8%B8%E5%B8%B8%E5%B0%86%E8%A7%86%E5%9B%BE%EF%BC%8C%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%E7%AD%89%E5%86%99%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%86%85%EF%BC%8C%E5%A6%82%E6%9E%9C%E7%BB%84%E4%BB%B6%E5%86%85%E5%AE%B9%E5%BE%88%E5%A4%9A%EF%BC%8C%E5%B8%B8%E5%B8%B8%E9%80%A0%E6%88%90%E5%B1%82%E6%AC%A1%E7%9A%84%E6%B7%B7%E4%B9%B1%EF%BC%8C%E5%A2%9E%E5%8A%A0%E5%BC%80%E5%8F%91%E5%92%8C%E6%97%A5%E5%90%8E%E7%BB%B4%E6%8A%A4%E7%9A%84%E6%88%90%E6%9C%AC%0A%20%20%20%20-%20MVC%E6%A8%A1%E5%BC%8F%E5%B0%B1%E6%98%AF%E4%B8%93%E9%97%A8%E5%A4%84%E7%90%86%E8%BF%99%E7%A7%8D%E9%97%AE%E9%A2%98%E7%9A%84%E3%80%82%0A%0A2.%20MVP%E6%A8%A1%E5%BC%8F%0A%20%20%20%20-%20%E4%BC%A0%E7%BB%9F%E7%9A%84MVC%E6%A8%A1%E5%BC%8F%E8%99%BD%E7%84%B6%E5%8F%AF%E4%BB%A5%E7%AE%A1%E7%90%86%E9%A1%B5%E9%9D%A2%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%A7%86%E5%9B%BE%EF%BC%8C%E6%8E%A7%E5%88%B6%E5%99%A8%EF%BC%8C%E4%BD%86%E6%98%AF%E5%9C%A8%E8%A7%86%E5%9B%BE%E5%B1%82%E5%88%9B%E5%BB%BA%E7%95%8C%E9%9D%A2%E6%97%B6%E5%B8%B8%E5%B8%B8%E4%BC%9A%E7%94%A8%E5%88%B0%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%86%85%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%BD%BF%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%92%8C%E8%A7%86%E5%9B%BE%E5%B1%82%E8%80%A6%E5%90%88%E5%9C%A8%E4%B8%80%E8%B5%B7%EF%BC%8C%E9%99%8D%E4%BD%8E%E4%BA%86%E5%A4%8D%E7%94%A8%E6%80%A7%E5%92%8C%E7%81%B5%E6%B4%BB%E6%80%A7%0A%20%20%20%20-%20MVP%E6%A8%A1%E5%BC%8F%E5%B0%B1%E6%98%AF%E4%B8%BA%E4%BA%86%E8%A7%A3%E5%86%B3%E8%BF%99%E6%96%B9%E9%9D%A2%E7%9A%84%E9%97%AE%E9%A2%98%E3%80%82%0A%20%20%20%20-%20M%EF%BC%88Model%EF%BC%89%E6%A8%A1%E5%9E%8B%EF%BC%8CV%EF%BC%88View%EF%BC%89%E8%A7%86%E5%9B%BE%EF%BC%8CP%EF%BC%88Presenter%EF%BC%89%E7%AE%A1%E7%90%86%E5%99%A8%0A%20%20%20%20-%20%E8%A7%86%E5%9B%BE%E5%B1%82%E4%B8%8D%E5%86%8D%E7%9B%B4%E6%8E%A5%E5%BC%95%E5%85%A5%E6%A8%A1%E5%9E%8B%E5%B1%82%E4%B8%AD%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E8%80%8C%E6%98%AF%E9%80%9A%E8%BF%87%E7%AE%A1%E7%90%86%E5%B1%82%E5%AE%9E%E7%8E%B0%E5%AF%B9%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%86%85%E7%9A%84%E6%95%B0%E6%8D%AE%E7%9A%84%E8%AE%BF%E9%97%AE%E3%80%82%0A%20%20%20%20-%20%E5%8D%B3%E6%89%80%E6%9C%89%E5%B1%82%E6%AC%A1%E7%9A%84%E4%BA%A4%E4%BA%92%E9%83%BD%E5%8F%91%E7%94%9F%E5%9C%A8%E7%AE%A1%E7%90%86%E5%B1%82%E4%B8%AD%EF%BC%8C%E4%BB%8E%E8%80%8C%E9%99%8D%E4%BD%8E%E4%BA%86%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%92%8C%E8%A7%86%E5%9B%BE%E5%B1%82%E4%B9%8B%E9%97%B4%E7%9A%84%E8%80%A6%E5%90%88%E5%85%B3%E7%B3%BB%EF%BC%8C%E6%8F%90%E5%8D%87%E4%BA%86%E7%81%B5%E6%B4%BB%E6%80%A7%E5%92%8C%E5%A4%8D%E7%94%A8%E6%80%A7%0A%0A3.%20MVVM%E6%A8%A1%E5%BC%8F%0A%20%20%20%20-%20%E5%9C%A8MVP%E6%A8%A1%E5%BC%8F%E4%B8%AD%EF%BC%8C%E6%89%80%E6%9C%89%E7%9A%84%E6%93%8D%E4%BD%9C%E9%83%BD%E5%9C%A8%E7%AE%A1%E7%90%86%E5%B1%82%E4%B8%AD%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%BF%85%E9%A1%BB%E5%88%9B%E5%BB%BA%E7%AE%A1%E7%90%86%E5%99%A8%E6%89%8D%E8%83%BD%E5%AE%9E%E7%8E%B0%E9%9C%80%E6%B1%82%EF%BC%8C%E4%BD%86%E6%98%AF%E5%AF%B9%E4%BA%8E%E5%BC%80%E5%8F%91%E8%80%85%E6%9D%A5%E8%AF%B4%EF%BC%8C%E5%A6%82%E6%9E%9Cjs%E5%AD%A6%E4%B9%A0%E7%9A%84%E4%B8%8D%E6%B7%B1%E5%85%A5%EF%BC%8C%E6%93%8D%E4%BD%9C%E7%AE%A1%E7%90%86%E5%99%A8%E7%9A%84%E6%88%90%E6%9C%AC%E5%85%B6%E5%AE%9E%E5%BE%88%E5%A4%A7%E3%80%82%0A%20%20%20%20-%20MVVM%E6%A8%A1%E5%BC%8F%E7%9A%84%E5%87%BA%E7%8E%B0%E5%B0%B1%E6%98%AF%E4%B8%BA%E4%BA%86%E8%BF%9B%E4%B8%80%E6%AD%A5%E7%9A%84%E5%87%8F%E5%B0%91%E8%BF%99%E7%A7%8D%E6%93%8D%E4%BD%9C%E6%88%90%E6%9C%AC%EF%BC%8C%E4%BD%BF%E5%BC%80%E5%8F%91%E8%80%85%E5%8F%AA%E9%9C%80%E8%A6%81%E9%80%9A%E8%BF%87%E6%93%8D%E4%BD%9Chtml%E5%B0%B1%E8%83%BD%E5%88%9B%E5%BB%BA%E8%A7%86%E5%9B%BE%E5%AE%9E%E7%8E%B0%E9%A1%B5%E9%9D%A2%E9%9C%80%E6%B1%82%0A%20%20%20%20-%20M%EF%BC%88Model%EF%BC%89%E6%A8%A1%E5%9E%8B%EF%BC%8CV%EF%BC%88View%EF%BC%89%E8%A7%86%E5%9B%BE%EF%BC%8CVM%EF%BC%88ViewModel%EF%BC%89%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%B1%82%E3%80%82%0A%20%20%20%20-%20%E4%B8%BA%E8%A7%86%E5%9B%BE%E5%B1%82%E9%87%8F%E8%BA%AB%E5%AE%9A%E5%81%9A%E4%B8%80%E5%A5%97%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%EF%BC%8C%E5%B9%B6%E5%9C%A8%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E4%B8%AD%E5%88%9B%E5%BB%BA%E5%B1%9E%E6%80%A7%E5%92%8C%E6%96%B9%E6%B3%95%EF%BC%8C%E4%B8%BA%E8%A7%86%E5%9B%BE%E5%B1%82%E7%BB%91%E5%AE%9A%E6%95%B0%E6%8D%AE%E5%B9%B6%E5%AE%9E%E7%8E%B0%E4%BA%A4%E4%BA%92%0A%20%20%20%20-%20MVVM%E6%A8%A1%E5%BC%8F%E6%98%AF%E4%BB%8EMVC%E6%A8%A1%E5%BC%8F%E5%92%8CMVP%E6%A8%A1%E5%BC%8F%E6%BC%94%E5%8C%96%E8%80%8C%E6%9D%A5%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%AE%83%E4%B8%BB%E8%A6%81%E4%B9%9F%E6%98%AF%E5%88%86%E7%A6%BB%E8%A7%86%E5%9B%BE%E5%92%8C%E6%A8%A1%E5%9E%8B%E3%80%82%0A%20%20%20%20-%20%E4%B8%8D%E5%90%8C%E7%9A%84%E6%98%AFMVVM%E6%A8%A1%E5%BC%8F%E4%BD%BF%E8%A7%86%E5%9B%BE%E5%B1%82%E6%9B%B4%E5%8A%A0%E7%81%B5%E6%B4%BB%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%8B%AC%E7%AB%8B%E4%BA%8E%E6%95%B0%E6%8D%AE%E5%B1%82%E5%92%8C%E8%A7%86%E5%9B%BE%E5%B1%82%EF%BC%8C%E5%AE%9E%E7%8E%B0%E7%8B%AC%E7%AB%8B%E4%BF%AE%E6%94%B9%EF%BC%8C%E8%87%AA%E7%94%B1%E5%88%9B%E5%BB%BA%E3%80%82%0A%20%20%20%20-%20MVVM%E6%A8%A1%E5%BC%8F%E6%98%AF%E5%AF%B9%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%B1%82%E7%9A%84%E9%AB%98%E5%BA%A6%E6%8A%BD%E8%B1%A1%EF%BC%8C%E5%9B%A0%E6%AD%A4%E5%BD%93%E5%A4%9A%E4%B8%AA%E8%A7%86%E5%9B%BE%E5%B1%82%E5%AF%B9%E5%BA%94%E4%B8%80%E4%B8%AA%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%B1%82%E6%97%B6%EF%BC%8C%E4%B9%9F%E4%BD%BF%E5%BE%97%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%86%85%E7%9A%84%E4%BB%A3%E7%A0%81%E9%80%BB%E8%BE%91%E5%8F%98%E5%BE%97%E9%AB%98%E5%BA%A6%E5%A4%8D%E7%94%A8%E3%80%82%0A%20%20%20%20-%20%E8%BF%99%E6%A0%B7%E5%8F%AF%E4%BB%A5%E6%9E%81%E5%A4%A7%E7%9A%84%E6%96%B9%E4%BE%BF%E4%B8%8D%E6%87%82js%E7%9A%84%E4%BA%BA%EF%BC%8C%E5%8F%AA%E8%A6%81%E4%BA%86%E8%A7%A3%E7%AE%80%E5%8D%95%E7%9A%84html%E5%86%85%E5%AE%B9%E5%B9%B6%E6%8C%89%E7%85%A7%E8%A7%86%E5%9B%BE%E5%B1%82%E7%9A%84%E8%A7%84%E8%8C%83%E6%A0%BC%E5%BC%8F%E5%88%9B%E5%BB%BA%E8%A7%86%E5%9B%BE%E5%8D%B3%E5%8F%AF%EF%BC%8C%E5%BC%80%E5%8F%91%E4%BA%BA%E5%91%98%E5%B0%B1%E5%8F%AF%E4%BB%A5%E4%B8%93%E6%B3%A8%E4%BA%8E%E5%BC%80%E5%8F%91%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%B1%82%E5%86%85%E7%9A%84%E4%B8%9A%E5%8A%A1%E9%80%BB%E8%BE%91%E3%80%82%0A%0A%0A%23%20%E4%B8%89%E3%80%81VUE%E5%9F%BA%E7%A1%80%0A%23%23%23%201.%20%E4%BD%BF%E7%94%A8%0A%23%23%23%23%23%201.1.%20%E5%BC%95%E5%85%A5%0A-%20%60%3Cscript%20src%3D%22vue.js%22%3E%3C%2Fscript%3E%60%0A%0A%23%23%23%23%23%201.2.%20%E5%88%9D%E5%A7%8B%E5%8C%96VUE%0A-%20%60const%20vm%20%3D%20new%20Vue(options)%3B%60%0A%0A%23%23%23%23%23%201.3.%20options%E8%A7%A3%E6%9E%90%0A%20%20%20%20-%20Vue%E7%9A%84%E9%85%8D%E7%BD%AE%E4%BF%A1%E6%81%AF%EF%BC%8C%E5%AF%B9%E8%B1%A1%E6%95%B0%E6%8D%AE%EF%BC%8C%E9%94%AE%E5%90%8D%E7%94%B1Vue%E6%8C%87%E5%AE%9A%EF%BC%8C%E5%80%BC%E7%94%B1Vue%E7%BA%A6%E6%9D%9F%0A%20%20%20%20-%20%E5%86%85%E5%90%AB%E5%A4%9A%E4%B8%AA%E9%80%89%E9%A1%B9%EF%BC%8C%E5%A6%82%EF%BC%9Ael%EF%BC%8Cdata%EF%BC%8Cmethods%EF%BC%8Ccomputed%E7%AD%89...%0A%0A%23%23%23%23%23%201.4.%20el%E9%80%89%E9%A1%B9%0A-%20%E7%94%A8%E4%BA%8E%E6%A0%87%E8%AE%B0%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8vue%E6%B8%B2%E6%9F%93%E7%9A%84%E5%AE%B9%E5%99%A8%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%20%20%2F%2F%20%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8vue%E6%B8%B2%E6%9F%93%E7%9A%84%E5%AE%B9%E5%99%A8%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%23%23%23%23%201.5.%20data%E9%80%89%E9%A1%B9%20%2B%20%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95-%E6%8F%92%E5%80%BC%0A-%20%E7%94%A8%E4%BA%8E%E8%AE%BE%E7%BD%AEvue%E5%AE%9E%E4%BE%8B%E4%B8%AD%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E7%9A%84%E6%95%B0%E6%8D%AE%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-bind%3Atitle%3D%22tit%22%3E%7B%7Bmsg%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%20%20%2F%2F%20%E5%BD%93%E5%89%8Dvue%E5%AE%9E%E4%BE%8B%E4%B8%AD%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E4%BB%A5%E9%94%AE%E5%80%BC%E5%AF%B9%E7%9A%84%E5%BD%A2%E5%BC%8F%E5%AD%98%E5%9C%A8%0A%20%20%20%20%20%20%20%20%20%20%20%20msg%3A%22hello%20vue%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20tit%3A%22%E9%BC%A0%E6%A0%87%E6%82%AC%E5%81%9C%E6%95%88%E6%9E%9C%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A!%5B4ed5ab9b1be1e74e665ca6dc70e9ce6e.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp714)%0A%0A%0A%0A%23%23%23%202.%20%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95-%E6%8C%87%E4%BB%A4%0A%23%23%23%23%23%202.1.%20vue%E6%8F%90%E4%BE%9B%E7%9A%84%E5%9B%BA%E6%9C%89%E6%8C%87%E4%BB%A4%0A%0A%7C%20%E6%8C%87%E4%BB%A4%20%7C%20%E5%8A%9F%E8%83%BD%20%7C%0A%7C%20---%3A%20%7C%20%3A---%20%7C%0A%7C%20v-text%20%7C%20%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95-%E6%8F%92%E5%80%BC-%E4%B8%8D%E8%A7%A3%E6%9E%90html%20%7C%0A%7C%20v-html%20%7C%20%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95-%E6%8F%92%E5%80%BC-%E8%A7%A3%E6%9E%90html%20%7C%0A%7C%20v-show%20%7C%20%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%20%7C%0A%7C%20v-if%20%7C%20%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%20%7C%0A%7C%20v-else%20%7C%20%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%20%7C%0A%7C%20v-else-if%20%7C%20%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%20%7C%0A%7C%20v-for%20%7C%20%E5%88%97%E8%A1%A8%E5%BE%AA%E7%8E%AF%20%7C%0A%7C%20v-on%20%7C%20%E7%BB%91%E5%AE%9A%E4%BA%8B%E4%BB%B6%20%7C%0A%7C%20v-bind%20%7C%20%E7%BB%91%E5%AE%9A%E5%B1%9E%E6%80%A7%20%7C%0A%7C%20v-model%20%7C%20%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%20%7C%0A%7C%20v-slot%20%7C%20%E6%8F%92%E6%A7%BD%20%7C%0A%7C%20v-pre%20%7C%20%E8%B7%B3%E8%BF%87%E8%BF%99%E4%B8%AA%E5%85%83%E7%B4%A0%E5%92%8C%E4%BB%96%E7%9A%84%E5%AD%90%E5%85%83%E7%B4%A0%E7%9A%84%E7%BC%96%E8%AF%91%E8%BF%87%E7%A8%8B%20%7C%0A%7C%20v-cloak%20%7C%20%E8%BF%99%E4%B8%AA%E6%8C%87%E4%BB%A4%E4%BF%9D%E6%8C%81%E5%9C%A8%E5%85%83%E7%B4%A0%E4%B8%8A%E7%9B%B4%E5%88%B0%E5%85%B3%E8%81%94%E5%AE%9E%E4%BE%8B%E7%BB%93%E6%9D%9F%E7%BC%96%E8%AF%91%20%7C%0A%7C%20v-once%20%7C%20%E5%8F%AA%E6%B8%B2%E6%9F%93%E5%85%83%E7%B4%A0%E5%92%8C%E7%BB%84%E4%BB%B6%E4%B8%80%E6%AC%A1%20%7C%0A%0A%23%23%23%23%23%202.2.%20%5B%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fcustom-directive.html)%0A%0A%23%23%23%203.%20%E6%8F%92%E5%80%BC%E8%AF%AD%E6%B3%95%0A-%20%60%7B%7B%7D%7D%60%2C%20%60v-text%60%2C%20%60v-html%60%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%7B%7Bmsg1%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%3E%7B%7Bmsg2%7D%7D%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-text%3D%22msg1%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-text%3D%22msg2%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-html%3D%22msg1%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-html%3D%22msg2%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20msg1%3A%22hello%20vue%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20msg2%3A%22%3Cmark%3Ehello%20vue%3C%2Fmark%3E%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A!%5B80be0b5290184db3b267bee304de8333.png%5D(evernotecid%3A%2F%2FBB210BE9-3A02-4842-A4C9-7970C5C1E576%2Fappyinxiangcom%2F16639017%2FENResource%2Fp715)%0A%0A%0A%0A%23%23%23%204.%20%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%0A-%20%60v-model%60%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E8%BE%93%E5%85%A5%E6%A1%86%E7%BB%91%E5%AE%9Avalue%20--%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22%E7%94%A8%E6%88%B7%E5%90%8D%22%20v-model%3D%22username%22%20%2F%3E%3Cbr%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22password%22%20placeholder%3D%22%E5%AF%86%E7%A0%81%22%20v-model%3D%22password%22%20%2F%3E%3Cbr%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%8D%95%E9%80%89%E6%A1%86%E7%BB%91%E5%AE%9A%E9%80%89%E4%B8%AD%E7%9A%84value%20--%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22radio%22%20name%3D%22sex%22%20v-model%3D%22sex%22%20value%3D%221%22%20%2F%3E%E7%94%B7%3Cbr%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22radio%22%20name%3D%22sex%22%20v-model%3D%22sex%22%20value%3D%220%22%20%2F%3E%E5%A5%B3%3Cbr%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%3C!--%20%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E7%BB%91%E5%AE%9A%E9%80%89%E4%B8%AD%E7%9A%84%E9%A1%B9%20--%3E%0A%20%20%20%20%20%20%20%20%3Cselect%20v-model%3D%22city%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22%E5%8C%97%E4%BA%AC%22%3E%E5%8C%97%E4%BA%AC%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22%E4%B8%8A%E6%B5%B7%22%3E%E4%B8%8A%E6%B5%B7%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%22%E5%B9%BF%E5%B7%9E%22%3E%E5%B9%BF%E5%B7%9E%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%A4%8D%E9%80%89%E6%A1%86%EF%BC%88%E5%A4%9A%E4%B8%AA%EF%BC%89%E7%BB%91%E5%AE%9A%E9%80%89%E4%B8%AD%E7%9A%84%E9%A1%B9%20--%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22like%22%20value%3D%22%E7%AF%AE%E7%90%83%22%20v-model%3D%22like%22%3E%E7%AF%AE%E7%90%83%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22like%22%20value%3D%22%E8%B6%B3%E7%90%83%22%20v-model%3D%22like%22%3E%E8%B6%B3%E7%90%83%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20name%3D%22like%22%20value%3D%22%E6%8E%92%E7%90%83%22%20v-model%3D%22like%22%3E%E6%8E%92%E7%90%83%0A%20%20%20%20%20%20%20%20%3C!--%20%E6%96%87%E6%9C%AC%E5%9F%9F%E7%BB%91%E5%AE%9A%E5%86%85%E5%AE%B9%20--%3E%0A%20%20%20%20%20%20%20%20%3Ctextarea%20v-model%3D%22note%22%3E%3C%2Ftextarea%3E%0A%20%20%20%20%20%20%20%20%3C!--%20%E5%A4%8D%E9%80%89%E6%A1%86%EF%BC%88%E5%8D%95%E4%B8%AA%EF%BC%89%E7%BB%91%E5%AE%9A%E6%98%AF%E5%90%A6%E9%80%89%E4%B8%AD%E7%9A%84%E5%B8%83%E5%B0%94%E5%80%BC%20--%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20v-model%3D%22flag%22%3E%E5%90%8C%E6%84%8F%E6%9D%A1%E6%AC%BE%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20value%3D%22%E6%9F%A5%E7%9C%8B%E7%94%A8%E6%88%B7%E8%BE%93%E5%85%A5%E4%BF%A1%E6%81%AF%22%20v-on%3Aclick%3D%22getData%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20username%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20password%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20sex%3A1%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20city%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20like%3A%5B%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20note%3A%22%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20flag%3Afalse%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20getData()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20console.log(this.%24data)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%0A%0A%0A%23%23%23%204.%20%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%0A-%20%60v-show%60%2C%20%60v-if%60%2C%20%60v-else%60%2C%20%60v-else-if%60%0A%23%23%23%23%23%204.1%20%E5%9F%BA%E6%9C%AC%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cselect%20v-model%3D%22state%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%220%22%20selected%3E0%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%221%22%3E1%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Coption%20value%3D%222%22%3E2%3C%2Foption%3E%0A%20%20%20%20%20%20%20%20%3C%2Fselect%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-if%3D%22state%3D%3D0%22%3E%E5%90%83%E9%A5%AD%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-else-if%3D%22state%3D%3D1%22%3E%E7%9D%A1%E8%A7%89%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-else%3D%22state%22%3E%E5%AD%A6%E4%B9%A0%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Chr%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-show%3D%22state%3D%3D0%22%3E%E5%90%83%E9%A5%AD%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-show%3D%22state%3D%3D1%22%3E%E7%9D%A1%E8%A7%89%3C%2Fh1%3E%0A%20%20%20%20%20%20%20%20%3Ch1%20v-show%3D%22state%3D%3D2%22%3E%E5%AD%A6%E4%B9%A0%3C%2Fh1%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20state%3A0%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0Aif%20%E5%92%8C%20show%E7%9A%84%E5%8C%BA%E5%88%AB.gif%0A%0A-%20v-if%20%E6%98%AF%E2%80%9C%E7%9C%9F%E6%AD%A3%E2%80%9D%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%0A-%20v-show%20%E4%B8%8D%E7%AE%A1%E5%88%9D%E5%A7%8B%E6%9D%A1%E4%BB%B6%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%8C%E9%83%BD%E4%BC%9A%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%8F%AA%E6%98%AF%E5%9F%BA%E4%BA%8E%20CSS%20%E7%9A%84%20display%20%E8%BF%9B%E8%A1%8C%E5%88%87%E6%8D%A2%0A%0A%23%23%23%23%23%204.2%20%E4%BD%BF%E7%94%A8key%E5%80%BC%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E5%85%83%E7%B4%A0%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20v-if%3D%22loginType%20%3D%3D%3D%20'username'%22%20%3Akey%3D%220%22%20placeholder%3D%22%E7%94%A8%E6%88%B7%E5%90%8D%22%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20v-else%20%3Akey%3D%221%22%20placeholder%3D%22%E5%AF%86%E7%A0%81%22%3E%0A%20%20%20%20%20%20%20%20%3Cbr%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22button%22%20v-on%3Aclick%3D%22setData%22%20v-bind%3Avalue%3D%22loginType%22%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20loginType%3A%22username%22%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20methods%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20setData()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.loginType%20%3D%20this.loginType%3D%3D%22username%22%20%3F%20%22password%22%20%3A%20%22username%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%5B%E5%8F%82%E8%80%83%E6%96%87%E6%A1%A3%5D(https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fconditional.html%23%25E7%2594%25A8-key-%25E7%25AE%25A1%25E7%2590%2586%25E5%258F%25AF%25E5%25A4%258D%25E7%2594%25A8%25E7%259A%2584%25E5%2585%2583%25E7%25B4%25A0)%0A%0A%0A%0A%23%23%23%205.%20%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%0A-%20%60v-for%60%0A%23%23%23%23%23%205.1%20v-for%20%2B%20key%20%E5%B1%9E%E6%80%A7%E7%9A%84%E4%BD%BF%E7%94%A8%0A%60%60%60html%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20v-for%3D%22item%20in%20list%22%20%3Akey%3D%22item%22%3E%7B%7Bitem%7D%7D%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20list%3A%5B%22%E8%8A%B1%E7%94%9F%22%2C%22%E7%93%9C%E5%AD%90%22%2C%22%E7%81%AB%E8%85%BF%E8%82%A0%22%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%23%23%23%23%23%205.2%20key%E7%9A%84%E5%94%AF%E4%B8%80%E6%80%A7%0A-%20%E5%90%8C%E4%B8%80%E4%B8%AA%E7%88%B6%E5%85%83%E7%B4%A0%E7%9A%84%E5%AD%90%E5%85%83%E7%B4%A0%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%8D%E5%90%8C%E7%9A%84%20key%E3%80%82%E9%87%8D%E5%A4%8D%E7%9A%84%20key%20%E4%BC%9A%E9%80%A0%E6%88%90%E6%B8%B2%E6%9F%93%E9%94%99%E8%AF%AF%E3%80%82%0A-%20%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E8%87%AA%E8%BA%AB%E5%85%B7%E6%9C%89%E5%94%AF%E4%B8%80%E6%80%A7%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%B0%86%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E4%B8%BAkey%E5%80%BC%0A-%20%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%94%AF%E4%B8%80%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%B0%86%E6%95%B0%E6%8D%AE%E7%9A%84%E7%B4%A2%E5%BC%95%E8%AE%BE%E7%BD%AE%E4%B8%BAkey%E5%80%BC%EF%BC%8C%E4%BD%86%E4%B8%8D%E6%8E%A8%E8%8D%90%0A-%20%E5%B0%BD%E9%87%8F%E8%AE%A9%E6%95%B0%E6%8D%AE%E6%8B%A5%E6%9C%89%E5%94%AF%E4%B8%80%E7%9A%84%E5%80%BC%0A%0A%23%23%23%23%23%205.3%20%E5%BE%AA%E7%8E%AF%E7%9A%84%E5%B5%8C%E5%A5%97%0A-%20%E5%BE%AA%E7%8E%AF%E6%94%AF%E6%8C%81%E5%B5%8C%E5%A5%97%E4%BD%BF%E7%94%A8%0A%60%60%60html%0A%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20v-for%3D%22val%20in%20list%22%20%3Akey%3D%22s%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cspan%3E%7B%7Bval.title%7D%7D%3C%2Fspan%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cli%20v-for%3D%22item%20in%20val.items%22%3E%7B%7Bitem%7D%7D%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20list%3A%5B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3A%22%E5%A4%A7%E8%8F%9C%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%5B%22%E7%BA%A2%E7%83%A7%E8%82%89%22%2C%22%E7%B3%96%E9%86%8B%E6%8E%92%E9%AA%A8%22%2C%22%E9%BA%BB%E8%BE%A3%E9%B1%BC%E5%A4%B4%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3A%22%E5%B0%8F%E8%8F%9C%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%5B%22%E9%85%B8%E8%BE%A3%E5%9C%9F%E8%B1%86%E4%B8%9D%22%2C%22%E5%B9%B2%E7%85%B8%E8%B1%86%E8%A7%92%22%2C%22%E5%9C%B0%E4%B8%89%E9%B2%9C%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20title%3A%22%E5%87%89%E8%8F%9C%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20items%3A%5B%22%E8%8A%B1%E7%94%9F%E7%B1%B3%22%2C%22%E6%8B%8C%E9%BB%84%E7%93%9C%22%2C%22%E7%9A%AE%E8%9B%8B%E8%B1%86%E8%85%90%22%5D%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%5D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A-%20**%E6%B3%A8%E6%84%8F%EF%BC%9A**%0A%20%20%20%201.%20%E4%B8%8D%E6%8E%A8%E8%8D%90%E5%90%8C%E6%97%B6%E4%BD%BF%E7%94%A8%20v-if%20%E5%92%8C%20v-for%0A%20%20%20%202.%20v-if%20%E4%B8%8E%20v-for%20%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8%E6%97%B6%EF%BC%8C%20v-for%20%E6%AF%94%20v-if%20%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%9B%B4%E9%AB%98%E3%80%82%0A%0A%0A%0A%23%23%23%206.%20class%E4%B8%8Estyle%E7%9A%84%E7%BB%91%E5%AE%9A%0A%23%23%23%23%23%206.1%20class%20%E7%9A%84%E7%BB%91%E5%AE%9A%0A-%20%E6%9D%A1%E4%BB%B6%E5%86%99%E6%B3%95%0A%60%60%60html%0A%3Cstyle%3E%0A%20%20%20%20.box%7Bwidth%3A%20100px%3Bheight%3A%20100px%3Bborder%3A%20solid%201px%20black%3B%7D%0A%20%20%20%20.red%7Bbackground%3A%20red%3B%7D%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22checkbox%22%20v-model%3D%22flag%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-bind%3Aclass%3D%22flag%20%3F%20'box%20red'%20%3A%20'box'%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flag%3Afalse%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A-%20%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95%0A%60%60%60html%0A%3Cstyle%3E%0A%20%20%20%20.box%7Bwidth%3A%20100px%3Bheight%3A%20100px%3Bborder%3A%20solid%201px%20black%3B%7D%0A%20%20%20%20.red%7Bbackground%3A%20red%3B%7D%0A%20%20%20%20.green%7Bbackground%3A%20green%3B%7D%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-bind%3Aclass%3D%22%7Bbox%3Aflag%2Cred%3A!flag%2Cgreen%3Aflag%7D%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flag%3Atrue%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A-%20%E6%95%B0%E7%BB%84%E5%86%99%E6%B3%95%0A%60%60%60html%0A%3Cstyle%3E%0A%20%20%20%20.box%7Bwidth%3A%20100px%3Bheight%3A%20100px%3Bborder%3A%20solid%201px%20black%3B%7D%0A%20%20%20%20.red%7Bbackground%3A%20red%3B%7D%0A%20%20%20%20.green%7Bbackground%3A%20green%3B%7D%0A%3C%2Fstyle%3E%0A%3Cbody%3E%0A%20%20%20%20%3Cdiv%20id%3D%22app%22%20style%3D%22border%3Asolid%202px%20%23aaa%3Bwidth%3A%20300px%3Bpadding%3A%2020px%3B%22%3E%0A%20%20%20%20%20%20%20%20%3Cdiv%20v-bind%3Aclass%3D%22%5Bstyle%2Ccolor%5D%22%3E%3C%2Fdiv%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fbody%3E%0A%3Cscript%20src%3D%22libs%2Fvue.js%22%3E%3C%2Fscript%3E%0A%3Cscript%3E%0A%20%20%20%20const%20vm%20%3D%20new%20Vue(%7B%0A%20%20%20%20%20%20%20%20el%3A%22%23app%22%2C%0A%20%20%20%20%20%20%20%20data%3A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3A%22box%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20color%3A%22red%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%0A%3C%2Fscript%3E%0A%60%60%60%0A%0A%23%23%23%23%23%206.2%20style%20%E7%9A%84%E7%BB%91%E5%AE%9A%20(%E4%BD%9C%E4%B8%9A)%0A-%20%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95%0A-%20%E6%95%B0%E7%BB%84%E5%86%99%E6%B3%95%0A%0A%0A</center></body></html>